import React, { Component } from 'react'
import { Col, Row, Tooltip, Progress, Icon } from 'antd'
import '../../../less/index.less'
import { Link, withRouter } from 'react-router-dom'
import UrlPattern from 'url-pattern'
import { FormattedMessage } from 'react-intl'
import {getLangFromLocalStorage} from '../../../constant/lang-util'

class TaskListView extends Component {
  getTask (taskId) {
    const pattern = new UrlPattern(`/program/:programId/task`)
    const url = pattern.match(this.props.location.pathname)
    return '/program/' + url.programId + '/task/' + taskId
  }

  getStatusRate (task, status) {
    const {assignments} = task
    const count = assignments.filter(item => status.includes(item.status)).length
    const rate = parseFloat(count / assignments.length).toFixed(2) * 100
    return {count, rate}
  }

  render () {
    const taskList = this.props.tasks || []
    return (<div>
      {
        taskList.map((task, index) => {
          const finish = this.getStatusRate(task, ['finished', 'excellent'])
          const reviewing = this.getStatusRate(task, ['reviewing'])
          const title = task[`title_${getLangFromLocalStorage()}`] || task.title
          const taskUrl = this.getTask(task.id)

          return <Row key={index} className='margin-b-2'>
            <Col span={6}>
              <Link to={taskUrl}>{index + 1}. {title}</Link>
            </Col>
            <Col span={3}>
              <span><FormattedMessage id='共' /> {task.assignments.length} <FormattedMessage id='个作业' />: </span>
            </Col>

            <Col span={2}>
              <FormattedMessage id='已提交' />：
            </Col>
            <Col span={3}>
              <Tooltip title={<FormattedMessage id='已提交' />} className='reviewing-status'>
                <Progress percent={reviewing.rate} status='active' format={(percent) => `${reviewing.count}`} />
              </Tooltip>
            </Col>

            <Col span={2} offset='1'>
              <FormattedMessage id='完成' />：
            </Col>
            <Col span={3}>
              <Tooltip title={<FormattedMessage id='已完成' />}>
                <Progress percent={finish.rate} status='active' format={(percent) => `${finish.count}`} />
              </Tooltip>
            </Col>

            <Col span={1} offset={1}>
              <Tooltip title={<FormattedMessage id='优秀' />}>
                <Icon type='trophy' className={task.status === 'excellent' ? 'excellent-status' : ''} />
              </Tooltip>
            </Col>

          </Row>
        })
      }
    </div>)
  }
}

export default withRouter(TaskListView)
